<template>
    <div>
        <!-- banner -->
        <div class="message-banner" :style="cover">
            <!-- 弹幕输入框 -->
            <div class="message-container">
                <h1 class="message-title">留言板</h1>
                <div class="message-input-wrapper">
                    <el-input class="input" v-model="content" placeholder="说点什么吧" @keyup.enter.native="addToList"
                        @focus="show = true"></el-input>
                    <el-button style="opacity: .6;" class="ml-3" round @click="addToList" v-show="show">发送</el-button>

                </div>
            </div>
            <!-- 弹幕列表 -->
            <div class="barrage-container">
                <vue-danmaku class="danmaku" ref="danmakuRef" v-model:danmus="barrageList" :isSuspend="true" :top="20"
                    useSlot :speeds="100" :channels="12" style="height: 100%; width: 100%">
                    <template v-slot:dm="{ danmu }">
                        <span class="barrage-items">
                            <img :src="danmu.avatar" width="30" height="30" style="border-radius: 50%" />
                            {{ danmu.nickname }}:{{ danmu.content }}</span>
                    </template>
                    
                </vue-danmaku>

            </div>


            <!-- <div class="barrage-container">
        <vue-danmaku
        class="danmaku"
          :danmus="barrageList"
          style="height: 100%; width: 100%"
          useSlot
          :speeds="150"
          :channels="15"
        >
          <template v-slot:dm="{ danmu }">
            <span class="barrage-items">
              <img
                :src="danmu.avatar"
                width="30"
                height="30"
                style="border-radius: 50%"
              />
              {{ danmu.nickname }}:{{ danmu.content }}</span
            >
          </template>
</vue-danmaku>
</div> -->
        </div>
    </div>
</template>

<script setup>
import { getMessagesApi, addMessageApi } from "@/api/message";
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
import VueDanmaku from 'vue3-danmaku';
import 'vue3-danmaku/dist/vue3-danmaku.css';
import { useRoute } from "vue-router";
import { useAuthStore } from "@/store";
import { ElMessage } from "element-plus";

const danmakuRef = ref(null);



const authStore = useAuthStore()
const route = useRoute()
const container = ref(null);
let danmakuInstance = null;

const show = ref(false)
const content = ref("")
const count = ref(null)
const timer = ref(null)
const barrageList = ref([])
const user = ref(authStore.userInfo)
const cover = computed(() => {
    var cover = "../../assets/1642481294001.png";
    return "background: url(" + cover + ") center center / cover no-repeat";
})

/**
 * 添加留言
 */
const addToList = () => {
    if (count.value) {
        ElMessage.error("30秒后才能再次留言");
        return false;
    }
    if (content.value.trim() === "") {
        ELMessage.error("留言不能为空");
        return false;
    }
    var message = {
        avatar: user.value ? user.value.avatar : authStore.webSiteInfo.touristAvatar,
        status: 1,
        nickname: user.value ? user.value.nickname : "游客",
        content: content.value
    };

    this.content = "";
    addMessageApi(message).then(res => {
        barrageList.value.push(message);
        ElMmessage.success("留言成功");
    }).catch(err => {
        ElMessage.error("留言失败");
    });
    const TIME_COUNT = 30;
    if (!timer.value) {
        count.value = TIME_COUNT;
        timer.value = setInterval(() => {
            if (count.value > 0 && count.value <= 30) {
                count.value--;
            } else {
                clearInterval(timer.value);
                timer.value = null;
            }
        }, 1000);
    }
}
/**
 * 获取留言列表
 */
const listMessage = () => {
    getMessagesApi().then(res => {
        barrageList.value = res.data;
    });
}


onMounted(() => {
    listMessage()
    if (!container.value) return;

    // 初始化弹幕实例
    danmakuInstance = new Danmaku({
        container: container.value,
        speed: 1400,  // 弹幕速度（ms）
        opacity: 0.9, // 不透明度
        fontSize: 20, // 字体大小
        data: []      // 初始弹幕数据
    });

    danmakuInstance.show();
});

</script>








<style lang="scss" scoped>
:deep(.el-input__inner) {
    border: none;
    border-radius: 50px;
    background: none;
    opacity: .6;
    box-sizing: border-box;
    padding-left: 10px;
}

:deep(.el-input__wrapper) {
    background: none;
    border: none !important;
    box-shadow: none;
}

:deep(.el-input__wrapper:focus),
:deep(.el-input__wrapper:hover) {
    border: none !important;
    box-shadow: none !important;
}

.message-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $primary;
    animation: header-effect 1s;


    .message-container {
        position: absolute;
        width: 360px;
        top: 35%;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 5;
        margin: 0 auto;
        color: #fff;

        .message-title {
            color: #eee;
            animation: title-scale 1s;
        }

        .message-input-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 3rem;
            margin-top: 2rem;
            box-sizing: border-box;

            .ml-3 {
                animation: left-in 1s ease;

                @keyframes left-in {
                    0% {
                        transform: translateY(-500%);
                    }

                    100% {
                        transform: translateX(0);
                    }
                }
            }
        }
    }

    .barrage-container {
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;

        .barrage-items {
            background: #000;
            border-radius: 100px;
            color: #fff;
            padding: 5px 10px 5px 5px;
            align-items: center;
            display: flex;
            margin-top: 10PX;
        }
    }

}


.baberrage {
    padding-top: 300px;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    background: url(@/assets/1642481294001.png);
    background-size: 100%;
}

.danmaku {
    width: 100%;
    height: 100%;
}

.control {
    margin-top: 20px;
}

.control>button {
    margin-right: 12px;
}

.control>button:hover {
    background-color: #e73c7e;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    animation: rightToleft 9s linear both;
}

.bullet-item {
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    height: 30px;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 30px;
    padding-right: 20px;
    display: flex;
}

img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
</style>